<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const item = ref({})

onLoad(e => {
  item.value = JSON.parse(e.item)
})


const copyFn = () => {
  uni.setClipboardData({
    data: item.value.respContent,
  })
}
</script>

<template>
  <NavBar>{{ item.promptTitle }}</NavBar>
  <div class="container">
    <div class="header">
      <div class="left">
        <div class="iconSty"></div>
        <div class="text">生成结果</div>
      </div>
      <div class="right" @click="copyFn">
        <i class="iconfont ai-icon-copy"></i>
        <div class="text">复制</div>
      </div>
    </div>
    <scroll-view scroll-y class="content">
      <div class="text">{{ item.respContent }}</div>
    </scroll-view>
  </div>
  <van-toast id="van-toast"></van-toast>
</template>

<style lang="less" scoped>
.container {
  padding: 0 30rpx 30rpx;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30rpx 0;

    .left {
      display: flex;
      align-items: center;

      .iconSty {
        width: 12rpx;
        height: 18rpx;
        background: var(--a-main-color);
        border-radius: 6rpx;
      }

      .text {
        margin-left: 12rpx;
        color: var(--a-one-text-color);
      }
    }

    .right {
      display: flex;
      align-items: center;
      color: var(--a-main-color);


      .text {
        margin-left: 6rpx;
      }
    }
  }

  .content {
    box-sizing: border-box;
    width: 690rpx;
    height: calc(100vh - 500rpx);
    line-height: 42rpx;
    border-radius: 20rpx;
    padding: 24rpx;
    letter-spacing: 4rpx;
    font-size: 28rpx;
    color: var(--a-one-text-color);
    background: var(--a-main-box-bg-color);

    .text {
      white-space: pre-wrap;
    }
  }
}
</style>